<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	const {Component} = React;
	// 组件其实是对HTML的一种扩展。类组件，函数组件。
	// 定义
	// 1- 类组件是需要通过class来定义的
	// 2- 类组件必须要继承React.Component
	// 3- 类的名字即是组件的名字
	// 4- 可以通过指定render方法来提供渲染的内容（render不允许省略）
	// 5- render返回的值即是渲染的内容。null undefined false true 不会进行任何的渲染！
	// 6- 组件是可以进行嵌套的。组件可以被使用多次
	// 定义1
	class App extends React.Component{
		render(){
			// return 1;
			// return "abcdefg";
			// return null;
			// return undefined;
			// return true;
			// return false;
			return (
				<div>
					<h3>App</h3>
					<Child/>
					<Child/>
					<Child/>
				</div>
			)
		}
	}
	// 定义2
	class Child extends Component{
		render(){
			return (
				<h3>Child</h3>
			)
		}
	}
	root.render(<App/>);
</script>
</html>